<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width: 100px;
        height: 100px;
        background-color:red;
        padding: 10px;
        border:10px solid yellow;
        /*margin: auto;*/
    }
    #box2
    {
        padding:100px;
        background-color: #bfa;
    }
    #box4
    {
        width: 200px;
        height: 300px;
        background-color: #bfa;
        overflow: auto;
        /*在内部box5的大小溢出的情况下，把overflow设置为hidden，那么就可以制止内部像素的超出*/
        /*如果设置为auto，那么就可以呈现滚动条。如果宽度和高度都超出，那么两个边界都会出现滚动条*/
    }
    #box5
    {
        width: 400px;
        height: 600px;/*如果把高度像素值设置的比外部box4大，那么就会超出*/
        background-color: yellow;
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
        var box1=document.getElementById("box1");
        var btn01=document.getElementById("btn01");
        var box3=document.getElementById("box3");
        var box4=document.getElementById("box4");
        btn01.onclick=function()
        {
            //clientWidth
            //clientHeight
            //这两个属性可以获取元素的可见宽度和高度，不包括边框
            //这些属性都是不带px的，都是数值，可以直接进行计算
            //这些属性都是只读的，不能进行修改
            console.log(box1.clientWidth);
            console.log(box1.clientHeight);
            //返回的都是实际宽度和高度

            //offsetWidth
            //offsetHeight
            //可以获取,包括内容区，内边距和边框
            console.log(box1.offsetHeight);
            console.log(box1.offsetWidth);

            //offsetParent
            //可以用来获取当前元素的定位父元素
            //会获取离当前元素最近的开启了定位的祖先元素(即position的值不是static)
            //如果所有的祖先元素都没有开启定位，则默认返回body
            var op=box1.offsetParent;
            console.log(op);
            console.log(op.id);

            //offsetLeft
            //当前元素相对于其定位元素的水平偏移量
            //offsetTop
            //当前元素相对于其定位父元素的垂直偏移量
            //offsetTop用法与上面的类似
            console.log(box1.offsetLeft);
            //console.log(box3.offsetLeft);

            //scrollWidth
            //scrollHeight
            //可以获取整个滚动区域的高度和宽度,不同于clientHeight只能获取可见的那一块区域的像素大小
            console.log(box4.clientHeight);//控制台输出300px，也就是设定的300px(可见)
            console.log(box4.scrollHeight);//控制台输出600px，也就是可见的滚动区域的600px

            //scrollLeft可以获取水平滚动条滚动的距离
            //scrollTop可以获取垂直滚动条滚动的距离
            console.log(box4.scrollLeft);
            console.log(box4.scrollTop);

            //当满足scrollHeight - scrollTop == clientHeight
            //说明垂直滚动条滚到底了
            console.log(box4.clientHeight);
            alert(box4.scrollHeight - box4.scrollTop);

            //当满足scrollWidth - scrollLeft ==clientWidth(部分)
            //说明水平滚动条滚动到底了
            console.log(box4.clientWidth);
            alert(box4.scrollWidth - box4.scrollLeft);
            //部分浏览器可能会出现相减的值小于的情况

            
        };
    };
    </script>
</head>
<body id="你爹">
    <button id="btn01">功能一</button>
    <br><br>
    <div id="box4">
        <div id="box5"></div>
    </div>
    <br><br>
    <div id="box2" style="position: relative;">
        <div id="box1"></div>
    </div>
    </div>
</body>
</html>